<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>扩展选择器</title>

    <style>
        /*属性选择器
        语法: []      标签名[属性名]
        作用: 选择具有指定属性名的标签
         */


        /*层级选择器
        语法: 空格     父选择器 子孙选择器
        作用: 父选择器选中父标签,子孙选择器选择子孙元素
         */


        /*并集选择器
        语法: ,       选择器1,选择器2
        作用: 多个选择器都起效果
        */


        /*伪类选择器 状态
        语法:  :      标签:状态
        作用: 指定标签在特定状态下的样式
         */
        /*a:link 正常状态*/


        /*a:visited 被访问后的状态*/


        /*a:hover 鼠标悬浮的状态*/


        /*a:active 鼠标按下的状态*/


        /*input:focus 获得焦点的状态,可以输入内容*/

    </style>
</head>
<body>
姓名:<input type="text"/><br/>
密码:<input type="password"/><br/>
qq:<input /><br/>
<hr/>

<ol>
    <li>包子</li>
    <li>油条</li>
</ol>

<div>
    <ul>
        <li>包子</li>
        <li>油条</li>
    </ul>
</div>
<hr/>

<p class="p1">我是段落1</p>
<p>我是段落2</p>
<span>我是span</span>
<div>我是div</div>
<hr/>

<a href="04_ext_selector2.html">点我有惊喜1</a><br/>
<a href="02_css_location2.html">点我有惊喜2</a><br/>
<a href="03_base_selector2.html">点我有惊喜3</a><br/>
<a href="http://www.baidu.com">点我去百度4</a><br/>
</body>
</html>